<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<%@ include file="/common/taglibs.jsp"%>
<title><fmt:message key="sys.healthcervix" /> | 首页</title>
<%@ include file="/common/meta.jsp"%>

<!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
<link href="${ctx}/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" />
<link href="${ctx}/assets/plugins/bootstrap-calendar/css/bootstrap_calendar.css" rel="stylesheet" />
<link href="${ctx}/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet" />
<link href="${ctx}/assets/plugins/morris/morris.css" rel="stylesheet" />
<!-- ================== END PAGE LEVEL CSS STYLE ================== -->
<!-- ================== BEGIN BASE JS ================== -->
<script src="${ctx}/assets/plugins/pace/pace.min.js"></script>
<!-- ================== END BASE JS ================== -->
</head>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->
	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<%@ include file="/common/header.jsp"%>
		<%@ include file="/common/slider.jsp"%>
		<!-- begin #content -->
		<div id="content" class="content" style="padding-top:20px">
			<!-- begin page-header -->
			
			<!-- end page-header -->
			
			<!-- begin row -->
			<div class="row">
				<!-- begin col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<div class="panel-heading">
							<h4 class="panel-title">入保电梯数据一览</h4>
						</div>
						<div id="schedule-calendar" class="bootstrap-calendar"></div>
						<div class="list-group">
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">2台</span> 引驱动乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">3台</span> 自动人行道电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">4台</span> 液压乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">1台</span> 其它电梯： </a>
						</div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-4 -->
				<!-- begin col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<div class="panel-heading">
							<h4 class="panel-title">近期入保电梯数据一览</h4>
						</div>
						<div id="schedule-calendar" class="bootstrap-calendar"></div>
						<div class="list-group">
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">3台</span> 引驱动乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">4台</span> 自动人行道电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">1台</span> 液压乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">10台</span> 其它电梯： </a>
						</div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<div class="panel-heading">
							<h4 class="panel-title">预警入保电梯数据一览</h4>
						</div>
						<div id="schedule-calendar" class="bootstrap-calendar"></div>
						<div class="list-group">
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">2台</span> 引驱动乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">1台</span> 自动人行道电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">4台</span> 液压乘客电梯： </a> 
							<a href="#" class="list-group-item text-ellipsis"><span class="badge badge-primary">5台</span> 其它电梯： </a>
						</div>
					</div>
					<!-- end panel -->
				</div>
			</div>
			
			<div class="row">
				<!-- begin col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<!-- 入保电梯数据一览饼形图 -->
						<div id="totalInsuredOrder" style="width: 350px; height: 270px;"></div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-4 -->
				<!-- begin col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<!-- 近期入保电梯数据一览饼形图 -->
						<div id="recentlyInsuredOrder" style="width: 350px; height: 270px;"></div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-4 -->
				<div class="col-md-4">
					<!-- begin panel -->
					<div class="panel panel-inverse" data-sortable-id="index-3">
						<!-- 预警入保电梯数据一览饼形图 -->
						<div id="warningInsuredOrder" style="width: 350px; height: 270px;"></div>
					</div>
					<!-- end panel -->
				</div>

				<div class="row">
					<div class="col-md-12 ui-sortable">
						<div class="panel panel-inverse">
							<div class="panel-heading">
								<div class="panel-heading-btn">
									<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"> <i class="fa fa-expand"></i> </a> 
									<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"> <i class="fa fa-minus"></i> </a>
								</div>
								<h4 class="panel-title">平台月度保险交易额一览</h4>
							</div>
							<div class="panel-body">
								<div id="platformMonthlyData" style="width: 100%; height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end row -->
		</div>
		<!-- end #content -->
	</div>
	<!-- end page container -->
	<%@ include file="/common/footer.jsp"%>
	<!-- ================== BEGIN PAGE LEVEL JS ================== -->

	<script src="${ctx}/assets/plugins/morris/raphael.min.js"></script>
	<script src="${ctx}/assets/plugins/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="${ctx}/assets/plugins/jquery-jvectormap/jquery-jvectormap-world-merc-en.js"></script>
	<script src="${ctx}/assets/plugins/bootstrap-calendar/js/bootstrap_calendar.min.js"></script>
	<script src="${ctx}/assets/plugins/gritter/js/jquery.gritter.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->
	<!-- echarts插件引用js -->
	<script src="${ctx}/js/echarts/echarts.min.js"></script>
    <script src="${ctx}/js/overView/overView.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->

	<script type="text/javascript">
		$(document).ready(function() {
			OverViewManaged.initTotalInsuredOrder();
			OverViewManaged.initRecentlyInsuredOrder();
            OverViewManaged.initWarningInsuredOrder();
            OverViewManaged.initPlatformMonthlyData();
		});
	</script>
</body>
</html>